<template>
  <div class="app-container">
    <el-table border v-if="refreshTable" v-loading="loading" :data="matList" row-key="lineId" :row-class-name="tableRowClassName">
      <el-table-column label="产品/物料名称" width="200" align="left" prop="productName" :show-overflow-tooltip="true"/>
      <el-table-column label="产品/物料编号" width="140" align="center" prop="productCode" :show-overflow-tooltip="true"/>
      <el-table-column label="物料类型" width="80" align="center" prop="itemOrProduct" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_item_product" :value="scope.row.itemOrProduct"/>
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" prop="bomSpc" :show-overflow-tooltip="true"/>
      <el-table-column label="单位" align="center" prop="unitOfMeasure" :show-overflow-tooltip="true"/>
      <el-table-column label="使用量" align="center" prop="used"/>
      <el-table-column label="使用比例" align="center" prop="proportional"/>
      <el-table-column label="库存数量" align="center" prop="quantityOnhand"/>
    </el-table>

  </div>
</template>

<script>
import { materielList } from '@/api/mes/pro/planningbom';
import { listTree } from "@/api/mes/pro/aomLine";

export default {
  name: 'AnalysisBom',
  dicts: ['mes_item_product'],
  data() {
    return {
      itemId: undefined,
      // 重新渲染表格状态
      refreshTable: true,
      // 遮罩层
      loading: true,
      // 生产工单BOM组成表格数据
      matList: [],
      showFlag: false,
      // 查询参数
      queryParams: {
        planIds: null,
        aomId: null
      }
    };
  },
  props: {
    planIds: undefined,
    optType: undefined,
    aomId: undefined
  },

  watch: {
    'planIds': function (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getList();
      }
    },
    'aomId': function (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getList();
      }
    }
  },

  created() {
    this.getList();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (row.used > row.quantityOnhand) {
        status = '1';
        return 'warning-row';
      }
      return '';
    },
    /** 查询生产工单BOM组成列表 */
    getList() {
      this.loading = true;
      if (this.optType == 'view') {
        this.queryParams.aomId = this.aomId;
        listTree(this.queryParams).then(response => {
          this.matList = response.data;
          this.loading = false;
        });
      } else {
        materielList(this.planIds).then(response => {
          this.matList = response.data;
          this.loading = false;
        });
      }
    },

    handleAdd() {
      this.$refs.bomItemSelect.showFlag = true;
    },
  }
};
</script>
<style scoped>
.info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item {
  width: 30%; /* Adjust width as needed */
  margin-bottom: 10px;
}

.info-item span {
  margin-left: 10px;
}

.info-item span:first-child {
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #262626;
  text-align: left;
  line-height: 20px;
  display: inline-block;
}

.content {
  color: #8c8c8c;
  text-align: left;
}
</style>
